<template>
    <div class="page">
        <div class="topBanner">
            <div>
                <div class="moneyNum">{{ tradeData.transAmount }}万</div>
                <div>团队总交易额</div>
            </div>
            <div class="bannerBottom">
                <div class="left">
                    <div class="moneyNum">{{ tradeData.directTransAmount }}万</div>
                    <div>自营总交易额</div>
                </div>
                <div class="right">
                    <div class="moneyNum">{{ tradeData.belowTransAmount }}万</div>
                    <div>下级团队总交易额</div>
                </div>
            </div>
        </div>
        <!-- 切换滑块 -->
        <div class="slider">
            <div class="item" @click="choseType(0)" :class="curActive == 0 ? 'active' : ''">日统计</div>
            <div class="item" @click="choseType(1)" :class="curActive == 1 ? 'active' : ''">月统计</div>
        </div>
        <div class="datePicker" @click="showDay = true">
            {{ curDay }}
            <img src="@/assets/shareData/slelectIcon.png" />
        </div>
        <!-- 内容区域 -->
        <div>
            <div class="cardItem" v-for="(item, index) in dataList" :key="index">
                <div class="titCon">
                    <div>{{ item.transTime }}</div>
                    <!-- <div @click="checkMore">
                        展开更多
                        <img class="checkMore" src="@/assets/shareData/checkMore.png" />
                    </div> -->
                </div>
                <div class="dataContent">
                    <div class="row">
                        <div class="teamLine" :style="{ background: item.transAmount == '0' ? '#ccc' : '#66d6ff' }"></div>
                        <div class="teamData">
                            团队
                            <span class="moneyNum">{{ item.transAmount }}万</span>
                            <span class="circle"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="selfLine" :style="{ background: item.directTransAmount == '0' ? '#ccc' : '#ea4524' }"></div>
                        <div class="selfData">
                            自营
                            <span class="moneyNum">{{ item.directTransAmount }}万</span>
                            <span class="circle"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="nextLine" :style="{ background: item.belowTransAmount == '0' ? '#ccc' : '#fda32d' }"></div>
                        <div class="nextData">
                            下级团队
                            <span class="moneyNum">{{ item.belowTransAmount }}万</span>
                            <span class="circle"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日历组件 -->
        <van-calendar
            :allow-same-day="true"
            :min-date="minDate"
            :max-date="maxDate"
            color="#55bbf9"
            v-model:show="showDay"
            :default-date="defaultDay"
            type="range"
            @confirm="onConfirm"
            :show-confirm="false"
        >
            <template #footer>
                <div class="footer">
                    <div class="item" @click="getDay('上周')">
                        <van-button type="primary">上周</van-button>
                    </div>
                    <div class="item" @click="getDay('本周')">
                        <van-button type="primary">本周</van-button>
                    </div>
                    <div class="item" @click="getDay('上月')">
                        <van-button type="primary">上月</van-button>
                    </div>
                    <div class="item" @click="getDay('本月')">
                        <van-button type="primary">本月</van-button>
                    </div>
                </div>
            </template>
        </van-calendar>
        <!-- 详情弹窗 -->
        <van-popup v-model:show="detailPopup" closeable close-icon="close" position="bottom" :style="{ height: '50%' }">
            <div class="popupContent">
                <div class="tableRow">
                    <div class="col">合伙人</div>
                    <div class="col">交易额</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script setup>
import { teamTransTrendDetailStatistic, teamTransTrendDetailDateStatistic } from '@/api/shareData.ts'
import { getDayPro } from '@/utils/utils.ts'
const curActive = ref(0)
const curDay = ref('')
let defaultDay = ref([])
const showDay = ref(false)
const detailPopup = ref(false)
const tradeData = ref({})
const dataList = ref([])
// 日历设置选择范围
const minDate = ref(new Date(new Date().getFullYear() - 1, new Date().getMonth() + 1, new Date().getDate()))
const maxDate = ref(new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))

getDayPro('本月').then(res => {
    curDay.value = res
    defaultDay.value = [new Date(res.split('至')[0]), new Date(res.split('至')[1])]
    getteamTransTrendDetailDateStatistic()
})
// 时间戳格式化
const formatTime = time => {
    let date = new Date(time)

    let year = date.getFullYear()

    let month = date.getMonth() + 1

    let day = date.getDate()

    return year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0')
}

const checkMore = () => {
    detailPopup.value = true
}
const getteamTransTrendDetailStatistic = () => {
    teamTransTrendDetailStatistic().then(res => {
        tradeData.value = res.object
    })
}
const getteamTransTrendDetailDateStatistic = () => {
    teamTransTrendDetailDateStatistic({
        statisticInterval: curActive.value == 0 ? 'day' : 'month',
        startTime: curDay.value.split('至')[0],
        endTime: curDay.value.split('至')[1]
    }).then(res => {
        dataList.value = res.object
    })
}
const onConfirm = values => {
    const [start, end] = values
    showDay.value = false
    curDay.value = `${formatTime(start)}至${formatTime(end)}`
    getteamTransTrendDetailDateStatistic()
}
const choseType = val => {
    curActive.value = val
    getteamTransTrendDetailDateStatistic()
}
const getDay = val => {
    getDayPro(val).then(res => {
        curDay.value = res
        showDay.value = false
        getteamTransTrendDetailDateStatistic()
    })
}
getteamTransTrendDetailStatistic()
</script>
<style scoped lang="scss">
.page {
    padding: 10px;
    .topBanner {
        color: #fff;
        font-size: 14px;
        font-family: SimHei;
        font-weight: 400;
        padding: 15px 50px 15px 26px;
        background: linear-gradient(173deg, #66d6ff 0%, #a9d0fe 100%);
        opacity: 1;
        border-radius: 6px;
        .moneyNum {
            font-size: 16px;
            font-family: DingTalk JinBuTi;
            font-weight: 500;
            margin-bottom: 7px;
        }
        .bannerBottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
        }
    }
    .slider {
        display: flex;
        align-items: center;
        height: 40px;
        background: #ffffff;
        opacity: 1;
        border-radius: 22px;
        margin: 10px 0;
        .item {
            width: 50%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #fff;
            border-radius: 22px;
            font-size: 14px;
            font-family: SimHei;
            font-weight: 400;
            color: #676767;
        }
        .active {
            color: #fff !important;
            background: linear-gradient(90deg, #66d6ff 0%, #a9d0fe 100%);
        }
    }
    .datePicker {
        font-size: 12px;
        font-family: '.PingFang SC';
        font-weight: 500;
        color: #707070;
        img {
            width: 10px;
            height: 10px;
            margin-left: 3px;
        }
    }
    .cardItem {
        padding: 6px;
        background: #ffffff;
        border: 1px solid #66a3fe;
        opacity: 1;
        border-radius: 6px;
        margin-top: 10px;
        .titCon {
            display: flex;
            justify-content: space-between;
            .checkMore {
                width: 14px;
                height: 14px;
                margin-left: 4px;
            }
        }
        .dataContent {
            margin-top: 14px;
            .row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #9f9f9f;
                margin-top: 10px;
                .teamLine {
                    width: 60%;
                    height: 9px;
                    background: #66d6ff;
                    opacity: 1;
                    border-radius: 0px;
                }
                .teamData {
                    display: flex;
                    align-items: center;
                    .moneyNum {
                        display: inline-block;
                        color: #66d6ff;
                        margin-left: 6px;
                    }
                    .circle {
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        background: #66d6ff;
                        border-radius: 50%;
                        margin-left: 6px;
                        opacity: 1;
                    }
                }
                .selfLine {
                    width: 60%;
                    height: 9px;
                    background: #ea4524;
                    opacity: 1;
                    border-radius: 0px;
                }
                .selfData {
                    display: flex;
                    align-items: center;
                    .moneyNum {
                        display: inline-block;
                        // color: #EA4524;
                        margin-left: 6px;
                    }
                    .circle {
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        background: #ea4524;
                        border-radius: 50%;
                        margin-left: 6px;
                        opacity: 1;
                    }
                }
                .nextLine {
                    width: 60%;
                    height: 9px;
                    background: #fda32d;
                    opacity: 1;
                    border-radius: 0px;
                }
                .nextData {
                    display: flex;
                    align-items: center;
                    .moneyNum {
                        display: inline-block;
                        // color: #EA4524;
                        margin-left: 6px;
                    }
                    .circle {
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        background: #fda32d;
                        border-radius: 50%;
                        margin-left: 6px;
                        opacity: 1;
                    }
                }
            }
        }
    }
    .popupContent {
        padding: 20px;
        padding-top: 50px;
        .tableRow {
            width: 100%;
            display: flex;
            justify-content: space-between;
            background: #f1f2f6;
            border-radius: 7px 7px 0 0;
            line-height: 30px;
            font-size: 28rpx;
            color: #9fa0a4;
            text-align: center;

            .col {
                width: 50%;
            }
        }
    }
    .footer {
        display: flex;
        align-items: center;
        .item {
            width: 50%;
            text-align: center;
            padding: 10px 0;
            color: #ffffff;
        }
        .van-button--primary {
            background: #eef8fe;
            color: #888;
            border: 0px;
        }
    }
}
</style>
